<template>
  <div id="app">
    <h1 class="app-title">开发者评估应用</h1>
    <div class="search-container">
      <h2>开发者搜索</h2>
      <div class="search-box">
        <select v-model="searchType" class="form-select">
          <option value="name">按开发者姓名搜索</option>
          <option value="nation">按国家/地区搜索</option>
          <option value="field">按领域搜索</option>
          <option value="email">按邮箱搜索</option>
        </select>
        <input v-bind:value="searchQuery" @input="searchQuery = $event.target.value" placeholder="搜索开发者..." class="form-input" />
        <button @click="searchDevelopers" class="btn btn-primary">搜索</button>
      </div>
    </div>

    <div class="developer-list-container">
      <h2>开发者列表</h2>
      <button @click="toggleSortOrder" class="btn btn-secondary">按技术能力 {{ sortOrder === 'asc' ? '升序' : '降序' }} 排序</button>
      <div class="table-container">
        <table class="table">
          <thead>
            <tr>
              <th>开发者姓名</th>
              <th>TalentRank</th>
              <th>领域</th>
              <th>开发者邮箱</th>
              <th>参与项目</th>
              <th>贡献量</th>
              <th>仓库发布日期</th>
              <th>技术栈</th>
              <th>项目规模</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="developer in sortedDevelopers" :key="developer.id" class="table-row">
              <td>
                <span class="flag-icon" :class="'fi fi-' + developer.nationCode"></span>
                {{ developer.name }}
              </td>
              <td>{{ developer.talentRank }}</td>
              <td>{{ developer.field }}</td>
              <td>{{ developer.email }}</td>
              <td>{{ developer.projects.join(', ') }}</td>
              <td>{{ getContributions(developer) }}</td>
              <td>{{ developer.repo_publish_date }}</td>
              <td>{{ developer.tech_stack.join(', ') }}</td>
              <td>{{ developer.project_size }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>


<script>
export default {
mounted() {
  this.searchDevelopers(); // 页面加载时自动调用 searchDevelopers
}
,
  data() {
    return {
      searchQuery: '',   // 搜索查询
      developers: [],    // 开发者数据
      sortOrder: 'asc',  // 排序顺序
      searchType: 'name' // 搜索类型（按姓名、国家/地区、领域、邮箱）
    };
  },
  computed: {
    sortedDevelopers() {
      return this.developers
        .filter(developer => {
          if (this.searchType === 'name') {
            return developer.name.toLowerCase().includes(this.searchQuery.toLowerCase());
          } else if (this.searchType === 'nation') {
            return developer.nation.toLowerCase().includes(this.searchQuery.toLowerCase());
          } else if (this.searchType === 'field') {
            return developer.field.toLowerCase().includes(this.searchQuery.toLowerCase());
          } else if (this.searchType === 'email') {
            return developer.email.toLowerCase().includes(this.searchQuery.toLowerCase());
          }
          return true; // 默认返回所有
        })
        .sort((a, b) => {
          return this.sortOrder === 'asc'
            ? a.talentRank - b.talentRank
            : b.talentRank - a.talentRank;
        });
    }
  },
  methods: {
    async searchDevelopers() {
      try {
        const response = await fetch(`http://localhost:5000/api/data?query=${this.searchQuery}&type=${this.searchType}`);
        const data = await response.json();
        this.developers = data.developers;
      } catch (error) {
        console.error('Error fetching developers:', error);
      }
    },
    toggleSortOrder() {
      this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
    },
    getContributions(developer) {
      // 将贡献量合并成字符串显示
      return Object.values(developer.contributions || {}).join(', ');
    }
  }
};
</script>

<style>
/* 页面整体样式 */
#app {
  max-width: 1000px;
  margin: 30px auto;
  padding: 20px;
  font-family: 'Roboto', sans-serif;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 标题样式 */
.app-title {
  text-align: center;
  font-size: 36px;
  color: #4A4A4A;
  margin-bottom: 30px;
}

/* 搜索部分样式 */
.search-container {
  margin-bottom: 30px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: center;
}

.form-select, .form-input, .btn {
  padding: 10px 15px;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.form-select, .form-input {
  width: 200px;
}

.btn {
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #0056b3;
}

.btn-primary {
  background-color: #28a745;
}

.btn-primary:hover {
  background-color: #218838;
}

.btn-secondary {
  background-color: #ffc107;
}

.btn-secondary:hover {
  background-color: #e0a800;
}

/* 开发者列表部分 */
.developer-list-container {
  margin-top: 20px;
}

.table-container {
  overflow-x: auto; /* 允许横向滚动 */
  margin-top: 20px;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
  color: #555;
}

th {
  background-color: #007bff;
  color: white;
}

.table-row {
  transition: background-color 0.3s ease;
}

.table-row:hover {
  background-color: #f1f1f1;
}

/* 确保国旗图标与姓名对齐 */
.flag-icon {
  width: 24px;   /* 设置宽度 */
  height: 16px;  /* 设置高度 */
  display: inline-block;  /* 确保其是行内块级元素 */
}


/* 你也可以根据需要调整国旗的尺寸 */
.table td {
  vertical-align: middle;
}

table th, table td {
  white-space: nowrap; /* 防止文本换行 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .form-select, .form-input, .btn {
    width: 100%;
    margin-bottom: 10px;
  }
  .search-box {
    flex-direction: column;
  }
}
</style>
